<template>
    <view class="container">
        <scroll-view class="scro" scroll-y="true">
            <view class="columns-container">
                <view class="column left-column">
                    <shop-item v-for="(item,index) in leftColumnData" :key="index" :item="item" />
                </view>
                <view class="column right-column">
                    <shop-item v-for="(item,index)  in rightColumnData" :key="index" :item="item" />
                </view>
            </view>
            <view v-if="loading" class="loading">加载中...</view>
        </scroll-view>
        <movable-area class="movable-area">
            <movable-view class="movable-view" direction="all" @click="sendshop(word)">
                <view class="btn">
					<text style="font-size: 50rpx;">+</text>
					<text style="font-size: 28rpx;">登记</text>
					</view>
            </movable-view>
        </movable-area>
    </view>
</template>

<script>
import getPois from '../../utils/getPois';
import ShopItem from '../../components/ShopItem.vue';
const app=getApp().globalData
export default {
	components:{ShopItem},
    data() {
        return {
            shopList: [],
            user: null,
            word: null,
            linlishop: [],
            location: {},
            loading: false
        };
    },
    computed: {
        listview() {
            // 合并并去重，假设sendshopId为唯一标识
           return [...this.linlishop, ...this.shopList];
		   },
   
        leftColumnData() {
            return this.listview.filter((_, index) => index % 2 === 0);
        },
        rightColumnData() {
            return this.listview.filter((_, index) => index % 2 === 1);
        }
    },
	watch:{
		listview:{
			handler(newdata){
				console.log("this.shopList: " + JSON.stringify(this.shopList));
				console.log("this.linlishop: " + JSON.stringify(this.linlishop));
				console.log("newdata: " + JSON.stringify(newdata));
				
			}
		}
	},
	
    async onLoad(res) {
        this.user = app.user
        this.location =app.location;
        this.word = res.word;
        this.loading = true;
        try {
            await Promise.all([this.getData(), this.getshopData(this.word)]);
        } catch (e) {
            uni.showToast({ title: '数据加载失败', icon: 'none' });
        }
        this.loading = false;
    },
    methods: {
        async getData() {
            try {
                const pois = await getPois(
                    this.location.longitude,
                    this.location.latitude,
                    this.word,
                    getApp().globalData.receiveDistance
                );
                this.shopList = pois[1]?.data?.pois || [];
		
            } catch (error) {
                console.error('获取地图数据失败:', error);
                uni.showToast({ title: '获取附近店铺失败', icon: 'none' });
            }
        },
        async getshopData(keyword) {
            try {
                const db = uniCloud.databaseForJQL();
                const res = await db.collection('sendshop')
                    .geoNear({
                        distanceField: 'distance',
                        near: new db.Geo.Point(
                            Number(this.location.longitude),
                            Number(this.location.latitude)
                        ),
                        maxDistance: Number(this.user?.receiveDistance || 500)
                    })
                    .match({ 'business.keytag': keyword })
                    .end();
                this.linlishop = res.data|| [];
            } catch (e) {
                console.error('数据库查询失败:', e);
                uni.showToast({ title: '查询店铺信息失败', icon: 'none' });
            }
        },
        sendshop(word) {
            uni.navigateTo({
                url: `/pages/sendShop/sendShop?key=${word}`
            });
        }
    }
};
</script>

<!-- 新增组件 ShopItem.vue -->
<!-- 在components目录下创建ShopItem.vue -->
<!-- 省略组件代码，需在父组件中引入 -->

<style>
.container {
    height: 100vh;
    display: flex;
    flex-direction: column;

}

.scro {
    flex: 1;
    background: #f5f5f5;
}

.columns-container {
    display: flex;
    padding: 5rpx;
    gap: 5rpx;
}

.column {
    flex: 1;
    min-width: 48%;
	display: flex;
	flex-direction: column;
align-items: center;
 }

.loading {
    text-align: center;
    padding: 20rpx;
    color: #666;
}

.movable-area {
    position: fixed;
    right: 40rpx;
    bottom: 40rpx;
    width: 140rpx;
    height: 140rpx;
    pointer-events: none;
}

.movable-view {
    width: 120rpx;
    height: 120rpx;
    background: #aa5500;
    border-radius: 50%;
    display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 48rpx;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.2);
}
.btn{
	
	display: flex;
	flex-direction: column;
	align-items: center;
}
</style>